<template>
  <div class="query-section">
    <!-- 已提交问题查看区 -->
    <div class="submitted-issues">
      <!-- 排序选择 -->
      <div class="sort-section">
        <label for="sort">排序：</label>
        <select id="sort" v-model="sortOrder">
          <option value="date">按时间排序</option>
          <option value="priority">按优先级排序</option>
        </select>
      </div>

      <!-- 问题列表 -->
      <table>
        <thead>
          <tr>
            <th>问题描述</th>
            <th>分类</th>
            <th>优先级</th>
            <th>提交时间</th>
            <th>处理状态</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="issue in sortedIssues" :key="issue.id">
            <td>{{ issue.description }}</td>
            <td>{{ issue.category }}</td>
            <td>{{ issue.priority }}</td>
            <td>{{ issue.submitTime }}</td>
            <td>{{ issue.status }}</td>
            <td>
              <button @click="trackIssue(issue)">查看进度</button>
            </td>
          </tr>
        </tbody>
      </table>
    </div>

    <!-- 问题进度跟踪弹框 -->
    <div v-if="selectedIssue" class="modal-overlay" @click="closeModal">
      <div class="modal-content" @click.stop>
        <h3>问题进度跟踪</h3>

        <!-- 进度展示 -->
        <div>
          <p><strong>当前状态:</strong> {{ selectedIssue.status }}</p>
          <p><strong>处理进度:</strong> {{ selectedIssue.progress }}</p>
        </div>

        <!-- 关闭弹框按钮 -->
        <div style="text-align: center">
          <button @click="closeModal">关闭</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      sortOrder: 'date', // 排序方式
      issues: [
        {
          id: 1,
          description: '服务器故障',
          category: '技术支持',
          priority: '高',
          submitTime: '2025-02-01',
          status: '待处理',
          progress: '正在处理',
          comments: []
        },
        {
          id: 2,
          description: '合同咨询',
          category: '合同咨询',
          priority: '中',
          submitTime: '2025-01-15',
          status: '处理中',
          progress: '正在与合同方沟通',
          comments: []
        }
      ],
      selectedIssue: null, // 当前选中的问题
      newComment: '' // 新评论
    }
  },
  computed: {
    sortedIssues() {
      if (this.sortOrder === 'date') {
        return this.issues.sort(
          (a, b) => new Date(b.submitTime) - new Date(a.submitTime)
        )
      } else {
        return this.issues.sort((a, b) => {
          const priorityOrder = { 低: 1, 中: 2, 高: 3 }
          return priorityOrder[b.priority] - priorityOrder[a.priority]
        })
      }
    }
  },
  methods: {
    // 查看问题进度
    trackIssue(issue) {
      this.selectedIssue = issue
    },
    // 提交评论
    submitComment() {
      if (this.newComment.trim()) {
        this.selectedIssue.comments.push({
          user: '企业用户',
          text: this.newComment
        })
        this.newComment = '' // 清空评论框
      }
    },
    // 关闭弹框
    closeModal() {
      this.selectedIssue = null // 关闭时清空选中的问题
    }
  }
}
</script>

<style scoped>
/* 样式 */
.query-section {
  margin-bottom: 20px;
  padding: 20px;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
}

.submitted-issues {
  margin: 20px 0;
}

button {
  background-color: #4caf50;
  color: white;
  padding: 12px 24px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

button:hover {
  background-color: #45a049;
}

select {
  padding: 8px 12px;
  border-radius: 5px;
  border: 1px solid #ddd;
  font-size: 16px;
  background-color: #f8f8f8;
  transition: border-color 0.3s ease;
}

select:hover {
  border-color: #4caf50;
}

textarea {
  width: 100%;
  padding: 12px;
  border-radius: 5px;
  border: 1px solid #ddd;
  background-color: #f8f8f8;
  font-size: 16px;
  resize: vertical;
  transition: border-color 0.3s ease;
}

textarea:hover {
  border-color: #4caf50;
}

table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 20px;
}

table,
th,
td {
  border: 1px solid #ddd;
  text-align: left;
}

th,
td {
  padding: 12px 15px;
  font-size: 16px;
}

th {
  background-color: #f4f4f4;
  font-weight: bold;
}

td {
  background-color: #fafafa;
}

td:hover {
  background-color: #f1f1f1;
}

.comments {
  margin-top: 20px;
}

.comment-section {
  margin-top: 20px;
}

.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
}

.modal-content {
  background-color: white;
  padding: 30px;
  border-radius: 12px;
  width: 90%;
  max-width: 700px;
  box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.2);
}

.modal-content h3 {
  font-size: 1.8em;
  margin-bottom: 20px;
  color: #333;
}

.modal-content .comments p {
  margin: 12px 0;
  background-color: #f9f9f9;
  padding: 12px;
  border-radius: 6px;
  box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);
  font-size: 15px;
}

.modal-content .comment-section {
  margin-top: 20px;
}

.modal-content button {
  background-color: #007bff;
  padding: 12px 25px;
  border-radius: 5px;
  border: none;
  color: white;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.modal-content button:hover {
  background-color: #0056b3;
}

.modal-content button:focus {
  outline: none;
}

.modal-content button.close-btn {
  background-color: #f44336;
}

.modal-content button.close-btn:hover {
  background-color: #e53935;
}
</style>
